<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#top{
				width: 500px;
				height: 500px;
				background: deepskyblue;
			}
			
			#middle{
				width: 300px;
				height: 300px;
				background: deeppink;
			}
			
			
		</style>
	</head>
	<body>
		<div id="top">
			<div id="middle">
		
			</div>
		</div>
		
	
		
		<script>
			
			//事件代理  给父亲添加事件，事件里判断当前触发的元素使哪一个，做相对应的事情
			var middle = document.getElementById('middle');
			var bottom = document.createElement('div');
//			bottom.setAttribute('id','bottom');
			bottom.id = 'bottom';
			middle.appendChild(bottom);
			
			//
			top.addEventListener('click',function (e) {
				if( e.target.id == 'bottom' ){
					//做bottom的事情
					
				}
				
				if ( event.target.id == 'middle' ){
					// 做middle的事情
				}
			});
			

			//事件代理
			
			
			
		</script>
	</body>
</html>
